<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rect_circle_ellipse</title>
</head>
<body>
    <!-- 绘制矩形 -->
    <svg width=""400" height="100">
        <rect width="300" height="100" fill="blue" stroke-width="3" stroke="black"/>
    </svg>
    <br/>

    <!-- 绘制矩形和半透明 -->
    <svg width="400" height="180">
        <rect x="50" y="20" width="150" height="150" fill="blue" stroke="tomato" stroke-width="5" opacity="0.5"/>
    </svg>
    <br/>

    <!-- 绘制 圆形 -->
    <svg width="500" height="140">
        <circle cx="50" cy="50" r="40" fill="red" stroke="black" stroke-width="3"/>
    </svg>
    <br/>

    <!-- 绘制 椭圆 -->
    <svg width="500" height="140">
        <ellipse cx="200" cy="80" rx="100" ry="50" fill="yellow" stroke="purple" stroke-width="2"/>
    </svg>
    <br/>

    <!-- 绘制 椭圆 -->
    <svg width="500" height="150">
        <ellipse cx="240" cy="100" rx="200" ry="30" fill="purple" />
        <ellipse cx="220" cy="70" rx="190" ry="20" fill="lime" />
        <ellipse cx="210" cy="45" rx="170" ry="15" fill="purple" />
    </svg>


    <!-- 绘制 椭圆嵌套 -->
    <svg width="1000" height="150">
        <ellipse cx="500" cy="100" rx="200" ry="30" fill="yellow" />
        <ellipse cx="490" cy="98" rx="100" ry="20" fill="white" />
    </svg>

</body>
</html>